<script setup lang="ts">
import { useSound } from '@vueuse/sound'
import { sleep } from '@/utils/sleep'
import stepImg01 from '@/assets/common/12/step_02_17.jpg'
import successSfx from '@/assets/sound/success.mp3'

const currentStepImg = ref(stepImg01)

const intro = useIntro({
  steps: [
  ],
}, [
])

const appStore = useAppStore()
const router = useRouter()
const secendBar = [
  {
    icon: 'split',
    label: '分割',
    callBack: () => { },
  },
  {
    label: '变速',
    icon: 'variableSpeed',
    callBack: () => { },
  },
  {
    label: '动画',
    icon: 'animation',
    callBack: () => { },
  },
  {
    label: '抖音玩法',
    icon: 'gameplay',
    callBack: () => { },
  },
  {
    label: '删除',
    icon: 'delete',
    callBack: () => { },
  },
]
const isUnmounted = ref(false); // 控制是否打断跳转
appStore.setGlobalTip('step_3_3', 'encourage_1')
const set1 = setTimeout(async () => {

  if (!isUnmounted.value) {
    router.push('Mask9_2_export')
  }
}, 5000);

onBeforeUnmount(() => {
  intro.stop()
  appStore.setGlobalTip("","")
  isUnmounted.value = true;
  console.log('Mask9_1 组件实例被卸载之前调用')
  clearTimeout(set1)
})
onUnmounted(() => {
  intro.stop()
  appStore.setGlobalTip("","")
  isUnmounted.value = true;
  console.log('Mask9_1 组件实例被卸载之前调用')
  clearTimeout(set1)
})
</script>

<template>
  <div class="flex-1 flex flex-col">
    <div class="yesclick no-click"></div>
    <div class=" flex justify-between h-4em p-x-1em pt-1em ">
      <div>
        <i class="i-material-symbols-close mr-1em" />
        <i class="i-material-symbols-help-outline" />
      </div>

      <div>
        <n-button type="info" size="small" class="mr-1em">
          1080P<i class="i-material-symbols-arrow-drop-down-rounded" />
        </n-button>
        <n-button id="exportBtn" type="primary" size="small">
          导出
        </n-button>
      </div>
    </div>

    <div class="bg-#0A0A0A flex-1 relative">
      <div id="closeVoice" class="h-60px w-60px absolute left-3em top-105vw" />
      <img :src="currentStepImg" class="w-full">
    </div>

    <div class="flex h-5em items-center bg-#1C1C1C" style="position: absolute; bottom: 0;width: 100%;">
      <div class="bg-#333 h-70% rounded flex-center m-x-0.5em">
        <i class="i-icon-park-outline-left" />
      </div>

      <div class="flex flex-1 overflow-x-auto scrollbar-none  ">
        <div v-for="item in secendBar" :id="item.icon" :key="item.label" class="flex-col-center flex-1 min-w-16%"
          @click.stop="item.callBack">
          <png-icon :icon="item.icon" class="text-2em m-b-3px" />
          <div class="text-sm">
            {{ item.label }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.no-click {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: transparent;
  z-index: 99;
}
</style>